<template>
    <div class='fxn-body'>
        <div class="fxn-tabs fxn-margin-b-20">
            <el-radio-group v-model="activeName" size="large" @change="handleTabs">
                <el-radio-button v-for="(item,index) in TabData" :key="index" :value="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
        </div>
        <!-- Tabs End -->
        <Searchs v-model:searchData="searchData" v-model:SearchForm="SearchForm" @handleSearch="handleSearch"></Searchs>
        <!-- Search End -->
        <div class="fxn-top" v-if="authMenu('sys_case_add') || authMenu('sys_case_import')">
            <el-button v-if="authMenu('sys_case_add')" type="primary" icon="Plus" @click="handleOp">添加</el-button>
            <el-button v-if="authMenu('sys_case_import')" type="primary" icon="Plus" @click="handleImport">批量导入</el-button>
        </div>
        <!-- Top End -->
        <div class="fxn-section fixed fxn-margin-t-20">
            <el-table v-loading="loading" :data="listData">
                <el-table-column label="案件ID" prop="id" width="80" fixed="left" />
                <el-table-column label="案件名称" prop="title">
                    <template #default="scope">
                        <el-link type="primary" :underline="false" @click="handlePath(scope.row)">{{scope.row.title}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="案件编号" prop="case_no" />
                <el-table-column label="案件状态" prop="status" width="120">
                    <template #default="scope">
                        <span v-if="activeName == 'type_nonlawsuit'">
                            {{$filter.nonlawStatus(scope.row.status)}}
                        </span>
                        <span v-if="activeName == 'type_penal'">
                            {{$filter.penalStatus(scope.row.status)}}
                        </span>
                        <span v-if="activeName == 'type_lawsuit'">
                            {{$filter.lawsuitStatus(scope.row.status)}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="承办人员" prop="lawyer_name" width="180" />
                <el-table-column label="归档状态" prop="close_status" width="80">
                    <template #default="scope">
                        {{scope.row.close_status == 1 ? '未归档' : '已归档'}}
                    </template>
                </el-table-column>
                <el-table-column label="合同金额" prop="contract_amount" width="120" />
                <el-table-column label="已收款金额" prop="finance_money" width="120" />
                <!-- <el-table-column label="开票状态" prop="invoice_status" width="80">
                    <template #default="scope">
                        {{$filter.invoiceStatus(scope.row.invoice_status)}}
                    </template>
                </el-table-column> -->
                <el-table-column label="更新时间" prop="update_time" width="160">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.update_time,1)}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->

        <div class="fxn-page fixed">
            <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- Page End -->

        <!-- 批量导入 -->
        <dialogForm ref="dialogImport" :formData="importData" @handleDialog="handleSubmitImport"></dialogForm>
        <!-- 批量导入 End -->
    </div>
</template>

<script>
    import Searchs from '../Common/Search.vue'
    import dialogForm from '../Common/Form.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {Searchs,dialogForm},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 1,
                page: 1,
                perPage: 10,
                loading: false,
                listData: [],

                //Tabs
                activeName: 'type_nonlawsuit',
                TabData: [
                    {value: 'type_nonlawsuit', label: '非诉类型'},
                    {value: 'type_penal', label: '刑事类型'},
                    {value: 'type_lawsuit', label: '诉讼类型'},
                ],

                //搜索
                SearchForm: {
                    id: '',
                    title: '',
                    case_no: '',
                    lawyer_id: '',
                    status: '',
                    close_status: '',
                    invoice_status: '',
                },
                searchData: [
                    {label: '案件ID', prop: 'id', type: 'input'},
                    {label: '案件名称', prop: 'title', type: 'input'},
                    {label: '案件编号', prop: 'case_no', type: 'input'},
                    {label: '承办人员', prop: 'lawyer_id', type: 'select', data: computed(() => store.state.userData), selectlabel: 'real_name', selectvalue: 'id'},
                    {label: '案件状态', prop: 'status', type: 'select', data: [], selectlabel: 'value', selectvalue: 'name'},
                    {label: '归档状态', prop: 'close_status', type: 'select', data: [{value: 1, label: '未归档'},{value: 2, label: '已归档'}], selectlabel: 'label', selectvalue: 'value'},
                    // {label: '开票状态', prop: 'invoice_status', type: 'select', data: computed(() => store.state.invoiceStatus), selectlabel: 'label', selectvalue: 'value'},
                ],

                //批量导入
                importData: {
                    inline: false,
                    width: '800',
                    title: '批量导入',
                    labelWidth: '120',
                    data: [
                        {formType: 'select',label: '案件类型', prop: 'case_type', data: [{value: 'type_nonlawsuit', label: '非诉类型'}, {value: 'type_penal', label: '刑事类型'}, {value: 'type_lawsuit', label: '诉讼类型'},], selectlabel: 'label', selectvalue: 'value'},
                        {formType: 'down', label: '模板文件', prop: 'downfile', downUrl: '/template/lawcase.xlsx'},
                        {formType: 'file', label: '文件上传', prop: 'files', accept: '.xlsx', size: 50, limit: 1,},
                    ]
                },
            })

            //Tabs
            const handleTabs = () => {
                getList(1,10);
                //初始化搜索条件: 案件状态-绑定数据
                for (let index = 0; index < state.searchData.length; index++) {
                    if(state.searchData[index].prop == 'status'){
                        if(state.activeName == 'type_nonlawsuit'){
                            state.searchData[index].data = computed(() => store.state.configAll.type_nonlawsuit);
                            break
                        }
                        if(state.activeName == 'type_penal'){
                            state.searchData[index].data = computed(() => store.state.configAll.type_penal);
                            break
                        }
                        if(state.activeName == 'type_lawsuit'){
                            state.searchData[index].data = computed(() => store.state.configAll.type_lawsuit);
                            break
                        }
                    }
                }
            }

            //列表
            const getList = (page,perPage) => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/index',{
                    page: page ? page : 1,
                    perPage: perPage ? perPage : 10,
                    case_type: state.activeName,
                    id: state.SearchForm.id,
                    title: state.SearchForm.title,
                    case_no: state.SearchForm.case_no,
                    lawyer_id: state.SearchForm.lawyer_id,
                    status: String(state.SearchForm.status),
                    close_status: state.SearchForm.close_status,
                    invoice_status: state.SearchForm.invoice_status,
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //打开操作
            const handleOp = () => {
                let pathUrl = router.currentRoute.value.path;
                router.push({path: '/CreateCase',query: {path: pathUrl.split('/').join(''), type: state.activeName}});
            }

            //批量导入
            const handleImport = () => {
                proxy.$refs.dialogImport.openDialog();
            }

            //提交批量导入
            const handleSubmitImport = (e) => {
                //格式化附件
                let array = e.files;
                let files = [];
                if(e.files){
                    for (let index = 0; index < array.length; index++) {
                        files.push(array[index].url);
                    }
                }
                proxy.$http.post('/oa/Lawcase/import', {
                    case_type: e.case_type,
                    file: String(files)
                })
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        window.location.reload();
                    }
                })
            }

            //搜索
            const handleSearch = (e) => {
                state.SearchForm = e;
                getList(1,10);
            }

            //跳转详情
            const handlePath = (row) => {
                router.push({path: '/CaseDetail', query: {id: row.id, type: state.activeName, pathUrl: '/CaseManage'}})
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                //初始化Tab案件类型
                if(router.currentRoute.value.query.type){
                    state.activeName = router.currentRoute.value.query.type;
                }
                
                //初始化请求
                getList();

                //初始化非诉类型-案件状态
                for (let index = 0; index < state.searchData.length; index++) {
                    if(state.searchData[index].prop == 'status'){
                        if(state.activeName == 'type_nonlawsuit'){
                            state.searchData[index].data = computed(() => store.state.configAll.type_nonlawsuit);
                            break
                        }
                    }
                }
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleTabs,
                getList,
                handleOp,
                handleImport,
                handleSubmitImport,
                
                //组件方法
                authMenu,
                handleSearch,
                handlePath,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>